<template>
  <div class="data-table">
    <n-data-table :columns="columns" :data="tableData" :pagination="pagination" :bordered="false" />
  </div>
</template>

<script>
import { h, defineComponent, toRefs } from "vue";
import { NDataTable, NButton } from "naive-ui";
import dayjs from "dayjs";

const createColumns = ({ play }) => {
  return [
    {
      title: "序列",
      key: "no",
    },
    {
      title: "SN码",
      key: "SNCode",
    },
    {
      title: "生成日期",
      key: "timestamp",
    },
  ];
};

export default defineComponent({
  components: {
    NDataTable,
    NButton,
  },
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  computed: {
    tableData() {
      return this.list.map((item, index) => {
        return {
          no: index + 1,
          SNCode: item,
          timestamp: dayjs().format("YYYY年MM月DD日"),
        };
      });
    },
  },
  setup(props, context) {
    const { list } = toRefs(props);
    return {
      list,
      columns: createColumns({
        play(row) {
          //   message.info(`Play ${row.title}`);
        },
      }),
      pagination: {
        pageSize: 15,
      },
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.data-table {
  margin-top: 20px;
}
</style>
